<div class="card">
  <div class="progress loop" *ngIf="isLoading">
    <progress></progress>
  </div>
  <div class="card-block">
    <ng-container *ngTemplateOutlet="currentAction ? action : content">
    </ng-container>
  </div>
  <ng-container *ngTemplateOutlet="currentAction ? formFooter :  contentFooter"></ng-container>
</div>

<ng-template #action>
  <app-form
    #appForm
    [form]="currentAction.form"
  >
  </app-form>
</ng-template>

<ng-template #content>
  <overlay-scrollbars>
    <div class="card-block">
      <h3 class="card-title">{{ title }}</h3>
      <app-alert *ngIf="v?.config.alert" [alert]="v.config.alert"></app-alert>
      <table class="table-noborder">
        <tbody>
          <tr *ngFor="let item of v?.config.sections; trackBy: identifyItem">
            <td class="left">{{ item.header }}</td>
            <td class="left">
              <app-view-table *ngIf="item.content?.metadata?.type === 'table'; else dynamic"
                [view]="item.content"
              ></app-view-table>
              <ng-template #dynamic>
                <app-view-container [view]="item.content"></app-view-container>
              </ng-template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </overlay-scrollbars>
</ng-template>

<ng-template #contentFooter>
  <div class="card-footer" *ngIf="shouldShowFooter()">
    <ng-container
      *ngFor="let action of v.config.actions; trackBy: identifyItem"
    >
      <button class="btn btn-sm btn-link" (click)="setAction(action)">
        {{ action.name }}
      </button>
    </ng-container>
  </div>
</ng-template>

<ng-template #formFooter>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm" type="submit" (click)="onActionSubmit()">Submit</button>
    <button class="btn btn-sm" type="button" (click)="onActionCancel()">
      Cancel
    </button>
  </div>
</ng-template>